<template>
  <div>
    <!-- 模板中会自动读取ref对象的value属性值 -->
    <h2>msg: {{state.msg}}</h2>
    <h2>user: {{state.user}}</h2>
    <h2>numbers: {{state.numbers}}</h2>

    <button @click="update">更新</button>
  </div>
</template>
<script lang="ts">
  import {
    reactive
  } from 'vue'

  interface State {
    msg: string
    user: {
      name: string,
      age?: number
    },
    numbers: number[]
  }

  export default {
    name: 'About',

    setup () {

      // 定义一个包含多个响应式数据的对象
      const state = reactive<State>({
        msg: 'abc',
        user: {
          name: 'tom'
        },
        numbers: [1, 3, 5]
      })

      const update = () => {
        // state.msg += '--'
        // state.user.name += '++'

        // 给对象添加一个新属性  ==> 界面会更新
        // state.user.age = Date.now()
        // 通过下标直接修改数组元素  ==> 界面会更新
        state.numbers[0] = Date.now()
      }

      return { 
        state,
        update
      }
    }
  }
</script>